<template>
	<view class="org-structure">
		<uni-nav-bar dark left-icon="left" :fixed="true" :minHeight="minHeight" :close-icon="stepBar.length<=2?'':'closeempty'" :border="false" :title="pageTitle" background-color="#fff" color="#262E3F" @clickLeft="goBack()" @clickClose="addressBook" />
		<view :class="['search-view', {'focus-bg': minHeight<44}]">
			<view class="search-box" v-if="minHeight<44" style="border: none;padding: 0px;">
				<uni-icons @click="cancel()" type="left" color="#fff" size="40rpx"></uni-icons>
				<text class="line"></text>
				<input class="input" type="text" :value="searchText" :focus="searchFocus" @input="searchInput" placeholder="搜索联系人" placeholder-style="color: #d7d7d7;" confirm-type="search" @confirm="search()">
				<uni-icons @click="searchText='';resultList=[]" type="clear" size="40rpx" color="#d7d7d7"></uni-icons>
			</view>
			<view class="search-box" v-else>
				<uni-icons customPrefix="iconfont" type="icon-sousuo" size="32rpx"></uni-icons>
				<view class="input" @click="focus()" style="color: #999">搜索</view>
			</view>
		</view>
		<view v-if="minHeight<44">
			<view class="" v-if="resultList.length>0">
				<view class="txl-org-item" v-for="(item, i) in resultList" :key="i" @click="utils.userDetails(item.accountId, item.userType)">
					<view class="logo-name">
						<image class="logo" :src="utils.headImage(item)" mode="aspectFill"></image>
						<text class="name">{{item.name}}</text>
					</view>
					<view class="no-wrap">
						<text class="type" v-if="0">校长</text>
						<uni-icons customPrefix="iconfont" type="icon-icon--" size="40rpx"></uni-icons>
					</view>
				</view>
			</view>
			<view class="no-result" v-else-if="searchText">
				<image src="/static/txl/ku.svg" mode="aspectFill"></image>
				<text>没有搜索到结果</text>
			</view>
		</view>
		<view class="" v-else>
			<view class="add-members" v-if="0">
				<view class="icon-text">
					<image class="icon" src="/static/txl/tjbmcy.png" mode="aspectFill"></image>
					<text>添加部门成员</text>
				</view>
				<uni-icons type="right" color="#aaa"></uni-icons>
			</view>
			<org-structure
			v-if="stepBar.length>0"
					:mail-list="mailList"
					:edit-bar="editBar"
					:step-bar="stepBar"
					:operation-type="1"
					@selectGroup="addressBook"></org-structure>
		</view>
	</view>
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import orgStructure from './components/org-structure.vue'
export default {
	components: {
        uniNavBar,
		orgStructure
    },
	data() {
		return{
			pageTitle: '同济大学第一附属中学',
			stepBar: [],
			editBar: -1,
			dataList: [],
			adminList: [],
			mailList: {},
			activeId: -1,
			searchText: '',
			searchFocus: false,
			resultList: [],
			// #ifdef APP-PLUS
			minHeight: 72,
			// #endif
			// #ifdef H5
			minHeight: 44,
			// #endif
			allAdminStudent: []
		} 
	},
	onLoad(options) {
		this.pageTitle = options.title ? options.title : this.pageTitle
		this.getData()
	},
	// #ifdef APP-PLUS
	onBackPress() {
		
		if(this.minHeight<44){
			this.cancel()
			return true;
		}
		let type = this.stepBar.length-1;
		if(type>0){
			this.editBar = type-1
			this.stepBar.splice(type)
			return true;
		}
		
	},
	// #endif
	methods: {
		goBack(){
			let type = this.stepBar.length-1;
			if(type <= 0){
				this.addressBook()
				return
			}
			// type += 1;
			this.editBar = type-1
			this.stepBar.splice(type)
		},
		getData(){

			this.api.get('mailList/findMailList').then(res=>{
				if(res.data.state != 'ok') return;
				this.stepBar.push({id: -1, name: '通讯录'})
				let data = res.data.node;
				this.mailList = data
				this.adminList = data.admins;

				this.dataList = data.children || [];
				this.activeId = data.tableId;
				this.stepBar.push({name: data.name, id: data.tableId})
				this.allAdminStudent = data.admins;
				let that = this;
				function fun(list){
					for(let i=0; i<list.length; i++){
						let datas = list[i]
						if(datas.type==3){
							that.allAdminStudent = that.allAdminStudent.concat(datas.admins, datas.students);
						}else if(datas.type>0){
							let arr = datas.children;
							fun(arr)
							that.allAdminStudent = that.allAdminStudent.concat(datas.admins);
							
						}
					}
					
				}
				fun(this.dataList)
			})
		},
		preStep(id){
			if(this.activeId == id) return;
			this.activeId = id;
			let type = this.stepBar.findIndex(item => item.id==id);
			type = type + 1
			
			this.stepBar.splice(type)
			if(type==1){
				this.dataList = this.mailList.children;
				this.adminList = this.mailList.admins;
			}else if(type == 2){
				let data = this.mailList.children.find(item=>item.tableId == id);
				this.dataList = data.children;
				this.adminList = data.admins;
			}else if(type == 3){
				
			}
		},
		nextStep(info){
			
			this.activeId = info.tableId || info.id;

			this.dataList = info.type!=3?info.children:info.students;
			this.adminList = info.admins;
			if(info.type==3){
				let admins = info.admins || []
				this.dataList =admins.concat(this.dataList)
				this.adminList = [];
			}
			
			this.stepBar.push({name: info.name, id: this.activeId})
		},
		addressBook(){
			uni.switchTab({
				url: "/pages/addressBook/address-book"
			})
		},
		focus(){
			// #ifdef APP-PLUS
			this.minHeight = 28
			// #endif
			// #ifdef H5
			this.minHeight = 0
			// #endif
			this.searchFocus = true
		},
		cancel(){
			this.searchFocus = false;
			// #ifdef APP-PLUS
			this.minHeight = 72
			// #endif
			// #ifdef H5
			this.minHeight = 44
			// #endif
		},
		searchInput(e){
			this.searchText = e.detail.value;
			
			this.search()
		},
		search(){
			let resultList = [], that = this;
			if(!this.searchText) {
				this.resultList = []
				return
			}
			for(let i=0;i<this.allAdminStudent.length; i++){
				let info = this.allAdminStudent[i]||{}
				
				let inx = resultList.findIndex(item=>item.id==info.id&&item.type==info.type)
				if(info.name&&info.name.indexOf(this.searchText)!=-1 && inx==-1){

					resultList.push(info)
				}
			}
			this.resultList = resultList;

		},
		chatPage(item){
			let url = item.avatarUrl||'';
			uni.navigateTo({
				url: `/pages/chatSystem/chat-page?toUserType=${item.userType}&id=${item.id}&accountId=${item.accountId}&name=${item.name}&avatarUrl=${url}`
			})
		},
	}
}
</script>
<style lang="less" scoped>
	.org-structure{
		
	}
	.search-view{
		padding: 20rpx 28rpx 32rpx;
	}
	.focus-bg{
		padding: 5px 10px;
		background: #55acee;
		.search-box{
			background: transparent;
		}
	}
	.search-box{
		
		padding: 0 20rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		background: #ECECEC;
		border-radius: 20rpx;
		.line{
			margin-left: 24rpx;
			border-left: 2rpx solid #d7d7d7;
			height: 28rpx;
		}
		.input{
			width: 84%;
			margin: 0 24rpx;
			font-size: 26rpx;
		}
		.cancel{
			white-space: nowrap;
		}
	}
	.add-members{
		margin: 0 12rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 32rpx;
		&:active{
			background-color: #f2f2f2;
			border-radius: 10rpx;
		}
		.icon{
			width: 32rpx;
			height: 32rpx;
			vertical-align: sub;
			margin-right: 20rpx;
		}
	}
	.org-box{
		
	}
	.no-org-box{
		text-align: center;
		margin-top: 100rpx;
	}
	.no-result{
		height: calc(100vh - 108rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 40rpx;
		}
	}
</style>